<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :width="900"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    :okText="$isEmpty(data) ? '新建' : '修改'"
    :title="$isEmpty(data) ? '新建楼盘' : '修改楼盘'"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
        <a-row :gutter="16" type="flex">
          <a-col :span="12">
            <a-form-item label="项目名称">
              <a-select
                v-decorator="['LID', { rules: [{ required: true, message: '请选择项目名称' }] }]"
                placeholder="请选择项目名称"
                :options="projectOptions"
                showSearch
                optionFilterProp="children"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="楼盘名称">
              <a-input
                v-decorator="['NAME', { rules: [{ required: true, message: '请输入楼盘名称' }] }]"
                placeholder="请输入楼盘名称"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="楼盘地址">
              <a-input
                v-decorator="['ADDRESS', { rules: [{ required: true, message: '请输入楼盘地址' }] }]"
                placeholder="请输入楼盘地址"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="总面积（㎡）">
              <a-input-number
                v-decorator="['TOTALAREA', { rules: [{ required: true, message: '请输入总面积' }] }]"
                placeholder="请输入总面积"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="项目状态">
              <a-select
                v-decorator="['MODE', { rules: [{ required: true, message: '请选择项目状态' }] }]"
                placeholder="请选择项目状态"
                :options="statusOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  getPlanOrProjetOptions,
  getRealEstateInformationDetail,
  postRealEstateInformation
} from '@/api/followUpManagement'
import { getDropdownList } from '@/api/common'
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'plan' }),
      isSubmiting: false,
      spinning: false,
      projectOptions: [],
      statusOptions: [],
      detailData: {}
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      const getDept = getPlanOrProjetOptions({
        mode: 'XM'
      })
      const getStatus = getDropdownList({ PmKey: 'RealEstateStatus' })
      const requestArr = [getDept, getStatus]
      if (!this.$isEmpty(this.data)) {
        const getDetail = getRealEstateInformationDetail({
          ID: this.data.ID
        })
        requestArr.push(getDetail)
      }
      Promise.all(requestArr)
        .then((res) => {
          this.projectOptions = res[0].map((e) => {
            return {
              label: e.NAME,
              value: e.ID
            }
          })
          this.statusOptions = res[1].map((e) => {
            return {
              label: e.DROPVALUE,
              value: e.DROPVALUE
            }
          })
          if (!this.$isEmpty(this.data)) {
            res[2].data.LID = Number(res[2].data.LID)
            this.detailData = res[2].data
            const setValues = pick(res[2].data, ['LID', 'Name', 'Address', 'TotalArea', 'Mode'])
            const setValuesToUpperCase = {}
            for (const key in setValues) {
                const element = setValues[key]
                setValuesToUpperCase[key.toUpperCase()] = element
            }
            this.$nextTick(() => {
              this.form.setFieldsValue(setValuesToUpperCase)
            })
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.form.resetFields()
      this.detailData = {}
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const isAdd = this.$isEmpty(this.data)
          Object.assign(values, {
            ID: this.detailData.ID || 0
          })
          this.isSubmiting = true
          postRealEstateInformation({
            State: isAdd ? 'add' : 'update',
            house: values
          })
            .then((res) => {
              this.$message.success(isAdd ? '添加成功！' : '修改成功！')
              this.$emit('success', isAdd)
              this.close()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  white-space: normal;
  padding-right: 12px;
}
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
